import { InjectionToken } from '@angular/core';

export interface IStyles { [key: string]: string; }
export interface IConfig {
	img?: string;
	svg?: string;
	loaderStyles?: IStyles;
	imgStyles?: IStyles;
	hostStyles?: IStyles;
	messageStyles?: IStyles;
	// TODO AnimationOptions
	rotate?: {
		delay?: number;
		direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
		duration?: number;
		easing?: string;
		endDelay?: number;
		fill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto';
		id?: string;
		iterationStart?: number;
		iterations?: number;
	};
}

export type optionsConfig = IConfig;

export const config: InjectionToken<string> = new InjectionToken('config');
export const NEW_CONFIG: InjectionToken<string> = new InjectionToken('NEW_CONFIG');
export const INITIAL_CONFIG: InjectionToken<IConfig> = new InjectionToken('INITIAL_CONFIG');

export const initialConfig: IConfig = {
	// tslint:disable-next-line:max-line-length
	img: '',
	svg: `	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style='enable-background: new 0 0 50 50;' xmlSpace="preserve">
	<path fill="var(--accent-color)" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(360 -4.05439e-8 -4.05439e-8)">
		<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
	</path>
</svg>`,
	loaderStyles: {
		'position': 'absolute',
		'left': '0',
		'right': '0',
		'top': '0',
		'bottom': '0',
		'background': 'var(--background-color)',
		'z-index': '50',
		'display': 'flex',
		'justify-content': 'center',
		'align-items': 'center',
	},
	imgStyles: {
		'width': '30px',
	},
	hostStyles: {
		'position': 'relative'
	},
	rotate: {
		iterations: Infinity
	},
};